<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-统计 -->
      <a-row :span="24">
        <a-col :span="6">
          <a-statistic title="当月检查数" :value="data.monthCheck" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="当月隐患数" :value="data.monthDanger" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="逾期数" :value="data.overdueNUm" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="待办数" :value="data.todoNum" />
        </a-col>
      </a-row>
      <!-- E-统计 -->
      <!-- S-表格 -->
      <div style="height:5vh"></div>
      <a-table :columns="columns" :data-source="data.recordDTOList" bordered :pagination="false">
        <a-table slot="expandedRowRender" slot-scope="record" :columns="twoColumns"
          :data-source="record.recordResultDTOList" :pagination="false"></a-table>
      </a-table>
      <!-- E-表格 -->
    </div>
  </a-spin>
</template>
  
<script>
import { mapState } from 'vuex'
import { message } from 'ant-design-vue'
import { getRecordMyList } from "@/services"
export default {
  name: 'Personal',
  data() {
    return {
      // 页面状态
      show: false,
      // 数据
      data: {
        monthCheck: 0,
        monthDanger: 0,
        overdueNUm: 0,
        todoNum: 0,
        recordDTOList: [],
      },
      // 数据结构
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
          width: '100px',
        },
        {
          title: '检查结果',
          dataIndex: 'checkResultTitle',
          key: 'checkResultTitle',
          width: '120px',
        },
        {
          title: '计划任务id',
          dataIndex: 'checkTaskId',
          key: 'checkTaskId',
          width: '100px',
        },
        {
          title: '检查类型',
          dataIndex: 'checkType',
          key: 'checkType',
          width: '100px',
        },
        {
          title: '组织id',
          dataIndex: 'orgId',
          key: 'orgId',
          width: '100px',
        },
        {
          title: '组织名称',
          dataIndex: 'orgName',
          key: 'orgName',
          width: '100px',
        },
        {
          title: '表格id',
          dataIndex: 'questionTableId',
          key: 'questionTableId',
          width: '100px',
        },
        {
          title: '上报人',
          dataIndex: 'reportUser',
          key: 'reportUser',
          width: '100px',
        },
        {
          title: '上报人id',
          dataIndex: 'reportUserId',
          key: 'reportUserId',
          width: '100px',
          scopedSlots: { customRender: 'operation' }
        },
      ],
      twoColumns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
          width: '100px',
        },
        {
          title: '附件',
          dataIndex: 'fileUrl',
          key: 'fileUrl',
          width: '100px',
        },
        {
          title: '问题id',
          dataIndex: 'questionId',
          key: 'questionId',
          width: '100px',
        },
        {
          title: '选择题答案',
          dataIndex: 'questionOptionId',
          key: 'questionOptionId',
          width: '150px',
        },
        {
          title: '简答题答案',
          dataIndex: 'questionResult',
          key: 'questionResult',
          width: '150px',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
          width: '150px',
        },
      ]
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  created() {
    // 获取数据
    this.fetchData()
  },
  methods: {
    /**
     * 获取数据
     */
    async fetchData() {
      this.show = false
      let { code, data, msg } = await getRecordMyList()
      if (code == 200) {
        this.data = data
      } else {
        message.error(msg)
      }
      this.show = true
    }
  }
}
</script>
  
<style scoped lang="less">

</style>